import React, { useEffect, useState } from "react";
import "./TodoList.css";
import TodoHeader from "./TodoHeader";
import TodoMain from "./TodoMain";
import TodoFooter from "./TodoFooter";
import { nanoid } from "nanoid";
//导入 axios
import axios from "axios";
//导入 axios 的实例
import instance from "../../utils/http";
import Swal from "sweetalert2";

// NProgress.start();

// setTimeout(() => {
//   NProgress.done();
// }, 2000)

export default function TodoList() {
  //声明任务数组的状态
  let [todos, setTodos] = useState([]);
  //标识是否为第一次请求
  let [isFirst, setIsFirst] = useState(true);

  //声明新增任务的函数
  let addTodo = async (title) => {
    //拼接对象
    let todo = {
      title: title,
      done: false,
    };
    //发送 AJAX 请求 新增数据
    let res = await instance.post("/todos", todo);

    //更新状态
    setTodos([...todos, res]);
  };

  //声明删除任务的函数
  let removeTodo = async (id) => {
    //发送请求
    await instance.delete(`/todos/${id}`);
    //过滤
    let newTodos = todos.filter((item) => item.id !== id);
    //更新状态
    setTodos(newTodos);
  };

  //声明更新任务的函数
  let checkTodo = async (id, done) => {
    //发送 AJAX 请求
    await instance.patch(`/todos/${id}`, { done: done });

    //map 方法
    let newTodos = todos.map((item) => {
      if (item.id === id) {
        //更新完成状态的值
        item.done = done;
      }
      return item;
    });
    // 更新状态
    setTodos(newTodos);
  };

  //声明更新全部任务的函数
  let checkAllTodo = async (done) => {
    //创建 promise 数组
    let arr = todos.map((item, index) => {
      // return axios.patch(`http://localhost:8080/todos/${item.id}`, {done: done});
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(
            axios.patch(`http://localhost:8080/todos/${item.id}`, {
              done: done,
            })
          );
        }, index * 40);
      });
    });
    //调用 Promise.all
    let result = await Promise.all(arr);
    //更新状态
    let newTodos = todos.map((item) => {
      //更新任务的完成状态
      item.done = done;
      return item;
    });
    //更新
    setTodos(newTodos);
  };

  //声明函数移除已经完成的任务
  let removeDoneTodo = () => {
    //过滤
    let newTodos = todos.filter((item) => item.done === false);
    //更新状态
    setTodos(newTodos);
  };

  //useEffect
  useEffect(() => {
    //测试新增任务
    // addTodo('测试')
    //测试删除任务
    // removeTodo(2);
    //测试更新任务
    // checkTodo(1, true)
    //测试所有任务的更新
    // checkAllTodo(true);
    //测试批量移除函数
    // removeDoneTodo();
  }, []);

  //useEffect   then 方法链式调用写法
  /*
  useEffect(() => {
    //组件挂载完毕, 发送 AJAX 请求获取任务数据
    axios.get('http://localhost:8080/todo').then(res => {
      //更新状态
      setTodos(res.data);
    }, err => {
      Swal.fire({
        icon: 'error',
        text: '数据获取失败...'
      });
    })
  }, []);
  */

  //useEffect   async 与 await 的写法
  useEffect(() => {
    let getTodos = async () => {
      //组件挂载完毕, 发送 AJAX 请求获取任务数据
      let res = await instance.get("/todos");
      //更新状态
      setTodos(res);
      //更新 isFirst 的状态
      setIsFirst(false);
    };
    //调用函数获取数据
    getTodos();
  }, []);

  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <TodoHeader addTodo={addTodo} />
        <TodoMain
          isFirst={isFirst}
          todos={todos}
          removeTodo={removeTodo}
          checkTodo={checkTodo}
        />
        <TodoFooter
          checkAllTodo={checkAllTodo}
          todos={todos}
          removeDoneTodo={removeDoneTodo}
        />
      </div>
    </div>
  );
}
